import React, { useEffect, useState } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import Home from '../Home/index'
import NotFound from '../../404'
import RightList from '../RightManage/RightList/index'
import RoleList from '../RightManage/RoleList/index'
import UserList from '../UserManage/index'
import NewsAdd from '../NewManage/NewsAdd'
import NewsDraft from '../NewManage/NewsDraft'
import NewsCategory from '../NewManage/NewsCategory'
import NewsPreview from '../NewManage/NewsPreview'
import NewsUpdate from '../NewManage/NewsUpdate'
import Audit from '../AuditManage/Audit'
import AuditList from '../AuditManage/AuditList'
import Unpublished from '../PublishManage/Unpublished'
import Published from '../PublishManage/Published'
import Sunset from '../PublishManage/Sunset'
import { getMenuList, getChildMenuList } from '@api'
// 全局loading
import { Spin } from 'antd'
import { connect } from 'react-redux'

function PremissionRoute(props) {
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  // 路由映射
  const LocalRouterMap = {
    "/home": Home,
    "/user-manage/list": UserList,
    "/right-manage/role/list": RoleList,
    "/right-manage/right/list": RightList,
    "/news-manage/add": NewsAdd,
    "/news-manage/draft": NewsDraft,
    "/news-manage/category": NewsCategory,
    "/news-manage/preview/:id": NewsPreview,
    "/news-manage/update/:id": NewsUpdate,
    "/audit-manage/audit": Audit,
    "/audit-manage/list": AuditList,
    "/publish-manage/unpublished": Unpublished,
    "/publish-manage/published": Published,
    "/publish-manage/sunset": Sunset
  }
  // 定义全部路由（除了404）
  const [allRouteList, setAllRouteList] = useState([])
  // 获取登录用户信息
  const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  useEffect(() => {
    get_all_route()
  }, [])
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  // 获取全部路由（除了404）（平铺在一个数组里，不显示包含关系）
  const get_all_route = () => {
    getMenuList().then((res) => {
      getChildMenuList().then((res1) => {
        setAllRouteList([...res.data, ...res1.data])
      })
    })
  }
  // 筛选所有可以显示的路由表
  const checkRoute = (item) => {
    // 路由映射表中有，且有pagepermisson时，返回true
    return LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
  }
  // 根据用户信息判单是否显示路由表
  const checkUserPermission = (item) => {
    // 如果根据登录用户信息可以访问的路由里面包含该item路径，返回true
    return rights.includes(item.key)
  }
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  return (
    <Spin size="large" spinning={props.isLoading}>
      <Switch>
        {
          allRouteList.map(item => {
            if (checkRoute(item) && checkUserPermission(item)) {
              return (
                <Route path={item.key} key={item.key} component={LocalRouterMap[item.key]} exact />
              )
            }
            return null
          })
        }
        <Redirect from="/" to="/home" exact />
        {
          allRouteList.length > 0 ?
            <>
              {/* <Route path="/notFound" component={NotFound} />
            <Redirect  to="/notFound" /> */}
              <Route path="*" render={() => { return <NotFound allRouteList={allRouteList} /> }} />
            </>
            :
            ''
        }
      </Switch>
    </Spin>
  )
}

const mapStateToProps = (state) => {
  const isLoading = state.LoadingReducer.isLoading
  return {
    isLoading
  }
}

export default connect(mapStateToProps)(PremissionRoute)